<template>
  <div class="page-drill">
    <div class="page-drill-header">
      <van-nav-bar left-text="每日一练" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="page-drill-body">
      <div class="body-header"></div>
      <div class="drill-bar">
        <van-progress color="#f2826a" :percentage="ratio" />
      </div>
      <div class="drill-next">
        <h3>单选题</h3> <div @click="onShow" class="drill-next-amend">查看答案</div>
        <template v-for="item in obj" :key="item.id">
          <p>
            <span>{{ num }}.</span>{{ item.topic }}
          </p>
          <div @click="onload" >
            <p>A.{{ item.A}} <van-icon name="success" v-show="isflag===1"/></p>
            <p>B.{{ item.A }}<van-icon name="success" v-show="isflag===2"/></p>
            <p>C.{{ item.C }}<van-icon name="success" v-show="isflag===3"/></p>
            <p>D.{{ item.D }}<van-icon name="success" v-show="isflag===4"/></p>
          </div>
        </template>
      </div>
      <div class="drill-button">
        <van-button type="default" @click="onLast">上一题</van-button>
        <van-button type="primary" @click="onNext">下一题</van-button>
      </div>
      <div class="drill-answer" :style="{ visibility: isShow===true ? 'visible' : 'hidden' }">
        <span class="drill-answer-title">答案</span>
        <div class="drill-answer-header">
          <template v-for="item in obj" :key="item.id">
            <span class="drill-answer-proper">正确答案:{{ item.ishot }}</span
            >&ensp;
          </template>
          <span class="drill-answer-yours"
            >你的答案:{{ drillStore.selectList[num - 1] }}</span
          >
        </div>
        <div class="drill-answer-bottom">
          <span>正确率:13%</span>|<span>易错项:B</span>
          <span class="drill-answer-collect"
            ><van-icon name="star" />收藏题目</span
          >
        </div>
      </div>
      <van-button type="warning" @click="onLooked">查看结果</van-button>
    </div>
  </div>
</template>
<script>
export default { name: "detail" };
</script>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { usedrillStore } from "../../stores/drill";
const num = ref(1);
const ratio = ref();
let obj = ref({});
let isflag = ref(0);
let listFlag=["A","B","C","D"];
const drillStore = usedrillStore();
let isShow = ref(false);
//发送axios获取题目和选项
function getBrush(id) {
  axios
    .get("http://localhost:3000/lists", {
      params: {
        id: id,
      },
    })
    .then((res) => {
      obj.value = { ...res.data };
    })
    .catch((err) => {
      console.log(err);
    });
}
//判断题目序号和进度
//上一题
function onLast() {
  if (num.value === 1) {
    return;
  }
  num.value--;
  ratio.value = parseInt((num.value / 20) * 100);
  getBrush(num.value);
  const index=listFlag.findIndex(item=>item===drillStore.selectList[num.value - 1]);
  // console.log(index);
 isflag.value=index+1;
}
//下一题
function onNext() {
  if (num.value === 20) {
    return;
  }
  num.value++;
  ratio.value = parseInt((num.value / 20) * 100);
  getBrush(num.value);
  const index=listFlag.findIndex(item=>item===drillStore.selectList[num.value - 1]);
  // console.log(index);
 isflag.value=index+1;
}
//获取自己的答案
let firstChar = ref();
function onload(e) {
  firstChar.value = e.target.innerHTML.charAt(0);
  drillStore.getSelection(firstChar.value);
  if (obj.value[0].ishot === firstChar.value) {
    drillStore.getContrasts(true);
  } else {
    drillStore.getContrasts(false);
  }
  const index=listFlag.findIndex(item=>item===firstChar.value);
  // console.log(index);
 isflag.value=index+1;
}
function onShow(){
  isShow.value=true;
}

//返回上一级路由
function onClickLeft() {
  window.history.back();
}
const router = useRouter();
//点击跳转到答题结果页面
function onLooked() {
  router.push("/outcome");
}

onMounted(() => {
  getBrush(1);
});
</script>

<style lang="scss" scoped>
.page-drill {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &-header {
    position: fixed;
    width: 100%;
    line-height: 50px;
    background-color: #fff;
    border: 1px solid #fff;
    z-index: 1;
  }
  &-body {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    .body-header {
      height: 60px;
    }
    .drill-bar {
      width: 100%;
      .van-progress {
        width: 80%;
        margin-left: 10%;
      }
    }
    .drill-next {
      margin: 20px;
      position: relative;
      p {
        margin-top: 30px;
      
      }
      &-amend{
        position: absolute;
        right: 30px;
        top: 10px;
        font-size: 12px;
      }
    }
    .drill-button {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .van-button {
        width: 30%;
        height: 30px;
      }
    }
    .drill-answer {
      margin: 30px 20px;
      background-color: #dddddd;
      border: 1px solid #dddddd;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
      font-size: 13px;
      &-title {
        font-size: 18px;
        font-weight: bold;
      }
      &-proper {
        color: #3fd;
      }
      &-yours {
        color: #f51;
      }
      &-header {
        margin-top: 10px;
      }
      &-bottom {
        margin-top: 10px;
        font-size: 8px;
        color: #999999;
        position: relative;
      }
      &-collect {
        color: #000;
        position: absolute;
        right: 10px;
        .van-icon {
          color: red;
        }
      }
    }
    .van-button {
      margin: 0 20px;
      width: 90%;
      border-radius: 25px;
    }
  }
}
</style>
